<template>
    <div>
        <nav style="text-align:center;" class="layout-navbar navbar navbar-expand-lg align-items-lg-center bg-white container-p-x">
                        <hr class="d-lg-none w-100 my-2">
            <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="#"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item active">驾校教练管理</li>
                                    <li class="breadcrumb-item active">教练管理表</li>
                                </ol>

            <div class="navbar-nav align-items-lg-center ml-auto">
                <div class="demo-navbar-notifications nav-item dropdown mr-lg-3">
                    <a class="nav-link dropdown-toggle hide-arrow" href="#" data-toggle="dropdown">
                        <i class="feather icon-bell navbar-icon align-middle"></i>
                        <span class="badge badge-danger badge-dot indicator"></span>
                        <span class="d-lg-none align-middle">&nbsp; Notifications</span>
                    </a>
                </div>
                <div class="nav-item d-none d-lg-block text-big font-weight-light line-height-1 opacity-25 mr-3 ml-1">|
                </div>
                <div class="demo-navbar-messages nav-item dropdown mr-lg-3">
                    <a class="nav-link dropdown-toggle hide-arrow" href="#" data-toggle="dropdown">
                        <i class="feather icon-mail navbar-icon align-middle"></i>
                        <span class="badge badge-success badge-dot indicator"></span>
                        <span class="d-lg-none align-middle">&nbsp; Messages</span>
                    </a>
                </div>
            </div>
        </nav>
        <!-- DataTable within card -->
        <div class="card">
            <div class="card-datatable table-responsive">
                <div id="DataTables_Table_1_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
                    <div class="row">
                        <div class="col-sm-12 col-md-6">
                            <div class="dataTables_length" id="DataTables_Table_1_length">
                                <label style="margin-left:300px;">
                                    <font _mstmutation="1" _msthash="957099" _msttexthash="5609370">显示
                                    </font><select name="DataTables_Table_1_length" aria-controls="DataTables_Table_1"
                                        class="form-control form-control-sm">
                                        <option value="2">2
                                        </option>
                                        <option value="5">5
                                        </option>
                                        <option value="10">10
                                        </option>
                                        <option value="15">15
                                        </option>
                                    </select>
                                    <font _mstmutation="20">条目
                                    </font>
                                </label>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6">
                            <div id="DataTables_Table_1_filter" class="dataTables_filter"><label
                                    style="margin-right:300px;">
                                    <font _mstmutation="1" _msthash="959244" _msttexthash="13304486">搜索：
                                    </font><input type="search" class="form-control form-control-sm"
                                        placeholder="搜索你想要的内容" aria-controls="DataTables_Table_1" @keyup="go" v-model="da">&nbsp;&nbsp;&nbsp;<router-link :to="`/cha/${da}`"><i
                                        class="feather icon-search navbar-icon align-middle"></i></router-link>
                                </label></div>
                               <h1>{{da}}</h1> 
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">

                            <table class="datatables-demo table table-striped table-bordered dataTable no-footer"
                                id="DataTables_Table_1" role="grid" aria-describedby="DataTables_Table_1_info">
                                <thead>
                                    <tr role="row">
                                        <th class="sorting_asc">id</th>
                                        <th class="sorting_asc">照片</th>
                                        <th class="sorting_asc">教练名</th>
                                        <th class="sorting">所在驾校</th>
                                        <th class="sorting">教龄</th>
                                        <th class="sorting">小时学费</th>
                                        <th class="sorting">分数</th>
                                        <th class="sorting">陪练科目</th>
                                        <th class="sorting">编辑/添加/删除</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="gradeA odd" role="row" v-for="(a,i) in coach" :key="i">
                                        <td>{{a.c_id}}</td>
                                        <td><img :src="a.c_img" height="50px" alt=""></td>
                                        <td>{{a.c_name}}</td>
                                        <td>{{a.c_dscool}}</td>
                                        <td>{{a.c_age}}</td>
                                        <td>{{a.c_hour_price}}</td>
                                        <td>{{a.c_score}}</td>
                                        <td>{{a.c_subjects}}</td>
                                         <td>
                                            <el-button class="spp"  type="text" @click="update(i)">修改</el-button>
                                            <el-button class="spp"  type="text" @click="add(i)">添加</el-button>
                                            <el-button class="spp"  type="text" @click="open(i)">删除</el-button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-md-7">
                            <div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_1_paginate">
                                <ul class="pagination">
                                    <li class="paginate_button page-item previous" id="DataTables_Table_1_previous"><a
                                            href="#" aria-controls="DataTables_Table_1" data-dt-idx="0" tabindex="0"
                                            class="page-link" _msthash="886939" _msttexthash="4029103">上一页</a></li>
                                    <li class="paginate_button page-item "><a href="#"
                                            aria-controls="DataTables_Table_1" data-dt-idx="1" tabindex="0"
                                            class="page-link" _msthash="1128868" _msttexthash="4459">1</a>
                                    </li>
                                    <li class="paginate_button page-item active"><a href="#"
                                            aria-controls="DataTables_Table_1" data-dt-idx="2" tabindex="0"
                                            class="page-link" _msthash="1396863" _msttexthash="4550">2</a>
                                    </li>
                                    <li class="paginate_button page-item "><a href="#"
                                            aria-controls="DataTables_Table_1" data-dt-idx="3" tabindex="0"
                                            class="page-link" _msthash="1690923" _msttexthash="4641">3</a>
                                    </li>
                                    <li class="paginate_button page-item "><a href="#"
                                            aria-controls="DataTables_Table_1" data-dt-idx="4" tabindex="0"
                                            class="page-link" _msthash="2011048" _msttexthash="4732">4</a>
                                    </li>
                                    <li class="paginate_button page-item "><a href="#"
                                            aria-controls="DataTables_Table_1" data-dt-idx="5" tabindex="0"
                                            class="page-link" _msthash="2357238" _msttexthash="4823">5</a>
                                    </li>
                                    <li class="paginate_button page-item "><a href="#"
                                            aria-controls="DataTables_Table_1" data-dt-idx="6" tabindex="0"
                                            class="page-link" _msthash="2729493" _msttexthash="4914">6</a>
                                    </li>
                                    <li class="paginate_button page-item next" id="DataTables_Table_1_next">
                                        <a href="#" aria-controls="DataTables_Table_1" data-dt-idx="7" tabindex="0"
                                            class="page-link" _msthash="680980" _msttexthash="6235931">下一页</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layout-content">
            <!-- [ content ] Start -->
            <div class="container-fluid flex-grow-1 container-p-y">
                <div class="row">
                    <div class="col-md-9">

                        <div class="cropper-example-container">
                            <img id="cropper-example-image" src="/coach/10.png" alt="Crope Image"
                                class="cropper-hidden">
                            <div class="cropper-container cropper-bg" touch-action="none"
                                style="width: 486px; height: 324px;">
                                <div class="cropper-wrap-box">
                                    <div class="cropper-canvas"
                                        style="width: 366.332px; height: 244.221px; transform: translateX(71.8993px) translateY(-11.9922px);">
                                        <img src="/coach/10.png"
                                            style="width: 366.332px; height: 244.221px; transform: none;"></div>
                                </div>
                                <div class="cropper-drag-box cropper-crop cropper-modal" data-action="crop"></div>
                                <div class="cropper-crop-box"
                                    style="width: 293.065px; height: 164.849px; transform: translateX(111.38px) translateY(7.03062px);">
                                    <span class="cropper-view-box"><img src="/coach/10.png"
                                            style="width: 366.332px; height: 244.221px; transform: translateX(-39.4804px) translateY(-19.0228px);"></span><span
                                        class="cropper-dashed dashed-h"></span><span
                                        class="cropper-dashed dashed-v"></span><span class="cropper-center"></span><span
                                        class="cropper-face cropper-move" data-action="all"></span><span
                                        class="cropper-line line-e" data-action="e"></span><span
                                        class="cropper-line line-n" data-action="n"></span><span
                                        class="cropper-line line-w" data-action="w"></span><span
                                        class="cropper-line line-s" data-action="s"></span><span
                                        class="cropper-point point-e" data-action="e"></span><span
                                        class="cropper-point point-n" data-action="n"></span><span
                                        class="cropper-point point-w" data-action="w"></span><span
                                        class="cropper-point point-s" data-action="s"></span><span
                                        class="cropper-point point-ne" data-action="ne"></span><span
                                        class="cropper-point point-nw" data-action="nw"></span><span
                                        class="cropper-point point-sw" data-action="sw"></span><span
                                        class="cropper-point point-se" data-action="se"></span></div>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-3">

                        <!-- Preview -->
                        <div class="mb-3 clearfix">
                            <div class="cropper-example-preview lg" style="width: 245px; height: 137.812px;"><img
                                    src="/coach/10.png"
                                    style="display: block; width: 306.25px; height: 204.167px; min-width: 0px !important; min-height: 0px !important; max-width: none !important; max-height: none !important; transform: translateX(-33.0052px) translateY(-15.9029px);">
                            </div>
                            <div class="cropper-example-preview md" style="width: 128px; height: 72px;"><img
                                    src="/coach/10.png"
                                    style="display: block; width: 160px; height: 106.667px; min-width: 0px !important; min-height: 0px !important; max-width: none !important; max-height: none !important; transform: translateX(-17.2435px) translateY(-8.30847px);">
                            </div>
                            <div class="cropper-example-preview sm" style="width: 64px; height: 36px;"><img
                                    src="/coach/10.png"
                                    style="display: block; width: 80px; height: 53.3333px; min-width: 0px !important; min-height: 0px !important; max-width: none !important; max-height: none !important; transform: translateX(-8.62177px) translateY(-4.15423px);">
                            </div>
                            <div class="cropper-example-preview xs" style="width: 32px; height: 18px;"><img
                                    src="/coach/10.png"
                                    style="display: block; width: 40px; height: 26.6667px; min-width: 0px !important; min-height: 0px !important; max-width: none !important; max-height: none !important; transform: translateX(-4.31089px) translateY(-2.07712px);">
                            </div>
                        </div>

                        <!-- Data -->
                        <div class="input-group input-group-sm mb-1">
                            <div class="input-group-prepend">
                                <span class="input-group-text">X</span>
                            </div>
                            <input type="text" class="form-control" id="cropper-example-dataX" placeholder="x"
                                readonly="">
                            <div class="input-group-append">
                                <span class="input-group-text">px</span>
                            </div>
                        </div>
                        <div class="input-group input-group-sm mb-1">
                            <div class="input-group-prepend">
                                <span class="input-group-text">Y</span>
                            </div>
                            <input type="text" class="form-control" id="cropper-example-dataY" placeholder="y"
                                readonly="">
                            <div class="input-group-append">
                                <span class="input-group-text">px</span>
                            </div>
                        </div>
                        <div class="input-group input-group-sm mb-1">
                            <div class="input-group-prepend">
                                <span class="input-group-text">Width</span>
                            </div>
                            <input type="text" class="form-control" id="cropper-example-dataWidth" placeholder="width"
                                readonly="">
                            <div class="input-group-append">
                                <span class="input-group-text">px</span>
                            </div>
                        </div>
                        <div class="input-group input-group-sm mb-1">
                            <div class="input-group-prepend">
                                <span class="input-group-text">Height</span>
                            </div>
                            <input type="text" class="form-control" id="cropper-example-dataHeight" placeholder="height"
                                readonly="">
                            <div class="input-group-append">
                                <span class="input-group-text">px</span>
                            </div>
                        </div>
                        <div class="input-group input-group-sm mb-1">
                            <div class="input-group-prepend">
                                <span class="input-group-text">Rotate</span>
                            </div>
                            <input type="text" class="form-control" id="cropper-example-dataRotate" placeholder="rotate"
                                readonly="">
                            <div class="input-group-append">
                                <span class="input-group-text">deg</span>
                            </div>
                        </div>
                        <div class="input-group input-group-sm mb-1">
                            <div class="input-group-prepend">
                                <span class="input-group-text">ScaleX</span>
                            </div>
                            <input type="text" class="form-control" id="cropper-example-dataScaleX" placeholder="scaleX"
                                readonly="">
                            <div class="clearfix"></div>
                        </div>
                        <div class="input-group input-group-sm mb-1">
                            <div class="input-group-prepend">
                                <span class="input-group-text">ScaleY</span>
                            </div>
                            <input type="text" class="form-control" id="cropper-example-dataScaleY" placeholder="scaleY"
                                readonly="">
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="cropper-example-buttons col-md-9">
                        <div class="btn-group mb-1">
                            <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1"
                                data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;zoom&quot;,&nbsp;0.1)">
                                <span class="ion ion-md-add"></span>
                            </button>
                            <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1"
                                data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;zoom&quot;,&nbsp;-0.1)">
                                <span class="ion ion-md-remove"></span>
                            </button>
                        </div>
                        <div class="btn-group mb-1">
                            <button type="button" class="btn btn-primary" data-method="move" data-option="-10"
                                data-second-option="0" data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;move&quot;,&nbsp;-10,&nbsp;0)"><span
                                    class="ion ion-md-arrow-back"></span></button>
                            <button type="button" class="btn btn-primary" data-method="move" data-option="10"
                                data-second-option="0" data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;move&quot;,&nbsp;10,&nbsp;0)"><span
                                    class="ion ion-md-arrow-forward"></span></button>
                            <button type="button" class="btn btn-primary" data-method="move" data-option="0"
                                data-second-option="-10" data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;move&quot;,&nbsp;0,&nbsp;-10)"><span
                                    class="ion ion-md-arrow-up"></span></button>
                            <button type="button" class="btn btn-primary" data-method="move" data-option="0"
                                data-second-option="10" data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;move&quot;,&nbsp;0,&nbsp;10)"><span
                                    class="ion ion-md-arrow-down"></span></button>
                        </div>
                        <div class="btn-group mb-1">
                            <button type="button" class="btn btn-primary" data-method="rotate" data-option="-45"
                                data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;rotate&quot;,&nbsp;-45)"><span
                                    class="ion ion-md-refresh"></span></button>
                            <button type="button" class="btn btn-primary" data-method="rotate" data-option="45"
                                data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;rotate&quot;,&nbsp;45)"><span
                                    class="ion ion-md-refresh scaleX--1"></span></button>
                        </div>
                        <div class="btn-group mb-1">
                            <button type="button" class="btn btn-primary" data-method="scaleX" data-option="-1"
                                data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;scaleX&quot;,&nbsp;-1)"><span
                                    class="ion ion-md-swap"></span></button>
                            <button type="button" class="btn btn-primary" data-method="scaleY" data-option="-1"
                                data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;scaleY&quot;,&nbsp;-1)"><span
                                    class="ion ion-md-swap rotate--90"></span></button>
                        </div>
                        <div class="btn-group mb-1">
                            <button type="button" class="btn btn-primary" data-method="reset"
                                data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;reset&quot;)"><span
                                    class="ion ion-md-sync"></span></button>
                            <label class="btn btn-primary btn-upload" data-toggle="cropper-example-tooltip" title=""
                                data-original-title="Upload image file"><input type="file" class="sr-only"
                                    id="cropper-example-inputImage" name="file"
                                    accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff"><span
                                    class="ion ion-md-cloud-upload"></span></label>
                        </div>
                        <div class="btn-group mb-1">
                            <button type="button" class="btn btn-primary" data-method="getCroppedCanvas"
                                data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;getCroppedCanvas&quot;)">Get Cropped
                                Canvas</button>
                            <button type="button" class="btn btn-primary" data-method="getCroppedCanvas"
                                data-option="{ &quot;width&quot;: 160, &quot;height&quot;: 90 }"
                                data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;getCroppedCanvas&quot;, {width:&nbsp;160,&nbsp;height:&nbsp;90})">160×90</button>
                            <button type="button" class="btn btn-primary" data-method="getCroppedCanvas"
                                data-option="{ &quot;width&quot;: 320, &quot;height&quot;: 180 }"
                                data-toggle="cropper-example-tooltip" title=""
                                data-original-title="$().cropper(&quot;getCroppedCanvas&quot;, {width:&nbsp;320,&nbsp;height:&nbsp;180})">320×180</button>
                        </div>

                    </div>
                </div>
                <!-- Show the cropped image in modal -->
                <div class="modal fade cropper-example-cropped" id="cropper-example-getCroppedCanvasModal"
                    aria-hidden="true" aria-labelledby="cropper-example-getCroppedCanvasTitle" role="dialog"
                    tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="cropper-example-getCroppedCanvasTitle">Cropped</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">×</span></button>
                            </div>
                            <div class="modal-body ie-mh-1"></div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <a class="btn btn-primary" id="cropper-example-download" href="#;"
                                    download="cropped.jpg">Download</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.modal -->
            </div>
        </div>

    </div>
</template>
<!-- cropper -->
<script src="assets/libs/cropper/cropper.js"></script>
<script src="assets/js/pages/ui_cropper.js"></script>
<!-- Demo -->
<script src="assets/js/script.js"></script>
<script src="assets/js/vendor.js"></script>
<script src="assets/libs/datatables/datatables.js"></script>
<script src="assets/js/pages/tables_datatables.js"></script>
<script src="assets/js/script.js"></script>
<script type="text/javascript">
	// <![CDATA[  <-- For SVG support
	if ('WebSocket' in window) {
		(function () {
			function refreshCSS() {
				var sheets = [].slice.call(document.getElementsByTagName("link"));
				var head = document.getElementsByTagName("head")[0];
				for (var i = 0; i < sheets.length; ++i) {
					var elem = sheets[i];
					var parent = elem.parentElement || head;
					parent.removeChild(elem);
					var rel = elem.rel;
					if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
						var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
						elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
					}
					parent.appendChild(elem);
				}
			}
			var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
			var address = protocol + window.location.host + window.location.pathname + '/ws';
			var socket = new WebSocket(address);
			socket.onmessage = function (msg) {
				if (msg.data == 'reload') window.location.reload();
				else if (msg.data == 'refreshcss') refreshCSS();
			};
			if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
				console.log('Live reload enabled.');
				sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
			}
		})();
	}
	else {
		console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
	}
	// ]]>
</script>
<script>
import '/public/css/googleapis.css'
import '/public/libs/cropper/cropper.css'
import '/public/css/style.css'
import '/public/libs/datatables/datatables.css'
import '/public/css/coach.css'
    export default {
        data() {
            return {
                coach:[],
                da:'',
            }
        },
        mounted () {
           this.getData()
        },
        methods: {
            go(){
                let path_now=this.$route.path
                let path_to='/cha/'+this.da
                if(path_now==path_to)return
                this.$router.push(path_to)
            },
            getData() {
                 var url='dtb/coach'
            this.axios.get(url).then(res=>{
                console.log(res);
                this.coach=res.data.data
            })
            },
         open(index) {
        this.$confirm('永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
             let id=this.coach[index].c_id
        this.axios.delete(`dtb/coachDelete/${id}`).then(res=>{
            this.getData()
        })
          this.$message({
            type: 'success',
            message: '删除第'+this.coach[index].c_id+'条成功!', 
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },

       add(index) {
        this.$confirm('添加文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消添加'
          });          
        });
      },
         update(index) {
        this.$confirm('修改文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          });          
        });
      }, 
        },
    }
</script>

<style lang="scss" scoped>
.datatables-demo{
    height: 300px;
    overflow-y: scroll;
}
.card{
    height: 1000px;
}
/* 滚动条样式 demo*/
.card::-webkit-scrollbar {
width: 10px;
  /*滚动条整体样式*/
}
.card::-webkit-scrollbar-thumb {
  width: 3px;
  background: #eee6;
  /*滚动条里面小方块*/
  border-radius:8px;
}
.card::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
 background-color: #99a9bf;
}
th {
    color: cornflowerblue;
    font-weight: bolder;
    line-height: 60px;
    font-size: 20px;
}
.el-main[data-v-54c38a05]{
    line-height: 30px;
    .breadcrumb{
        line-height: 30px;
        position: relative;
        top: 10px;
        li{
          color: fade-in($color: #8082fb, $amount: 0);
        }
    }
}
.row>div{
    line-height: 50px;
    position: relative;
    top: 15px;
}
tr>td {
    line-height: 30px;
    width: 250px;
    .spp{
    width: 50px;
    margin:0 10px;
    display: inline-block;
    background-color: #fff;
}
.spp:first-child{
background-color: rgb(138, 162, 232);
color: #fff;
border-radius: 20px;
user-select: none;
cursor: pointer;
}
.spp:nth-child(2){
background-color: rgb(149, 213, 255);
color: #fff;
border-radius: 20px;
user-select: none;
cursor: pointer;
}
.spp:last-child{
background-color: rgb(224, 188, 255);
color: #fff;
border-radius: 20px;
user-select: none;
cursor: pointer;
}
}

</style>
